<div class="content__title">
    <h1>
        Colors
        <small>Color Palettes</small>
    </h1>
</div>
<div nz-row [nzGutter]="16" class="list">
    <div nz-col [nzMd]="24">
        <nz-card nzTitle="Classic colors">
            <div nz-row *ngFor="let c of c.brands">
                <div nz-col [nzSpan]="8">
                    <div class="bg-{{c}}-light p-lg">
                        <p (click)="onCopy('bg-' + c + '-light')">.bg-{{c}}-light</p>
                        <p (click)="onCopy('text-' + c + '-light')">.text-{{c}}-light</p>
                    </div>
                </div>
                <div nz-col [nzSpan]="8">
                    <div class="bg-{{c}} p-lg">
                        <p (click)="onCopy('bg-' + c)">.bg-{{c}}</p>
                        <p (click)="onCopy('text-' + c)">.text-{{c}}</p>
                    </div>
                </div>
                <div nz-col [nzSpan]="8">
                    <div class="bg-{{c}}-dark p-lg">
                        <p (click)="onCopy('bg-' + c + '-dark')">.bg-{{c}}-dark</p>
                        <p (click)="onCopy('text-' + c + '-dark')">.text-{{c}}-dark</p>
                    </div>
                </div>
            </div>
        </nz-card>
    </div>
</div>
<div nz-row [nzGutter]="16" class="list">
    <div nz-col [nzMd]="24">
        <nz-card nzTitle="Name colors">
            <div nz-row *ngFor="let c of c.names">
                <div nz-col [nzSpan]="8">
                    <div class="bg-{{c}}-light p-lg">
                        <p (click)="onCopy('bg-' + c + '-light')">.bg-{{c}}-light</p>
                        <p (click)="onCopy('text-' + c + '-light')">.text-{{c}}-light</p>
                    </div>
                </div>
                <div nz-col [nzSpan]="8">
                    <div class="bg-{{c}} p-lg">
                        <p (click)="onCopy('bg-' + c)">.bg-{{c}}</p>
                        <p (click)="onCopy('text-' + c)">.text-{{c}}</p>
                    </div>
                </div>
                <div nz-col [nzSpan]="8">
                    <div class="bg-{{c}}-dark p-lg">
                        <p (click)="onCopy('bg-' + c + '-dark')">.bg-{{c}}-dark</p>
                        <p (click)="onCopy('text-' + c + '-dark')">.text-{{c}}-dark</p>
                    </div>
                </div>
            </div>
            <div nz-row>
                <div nz-col [nzSpan]="5">
                    <div class="bg-grey-darker p-lg">
                        <p (click)="onCopy('bg-grey-darker')">.bg-grey-darker</p>
                        <p (click)="onCopy('text-grey-darker')">.text-grey-darker</p>
                    </div>
                </div>
                <div nz-col [nzSpan]="5">
                    <div class="bg-grey-dark p-lg">
                        <p (click)="onCopy('bg-grey-dark')">.bg-grey-dark</p>
                        <p (click)="onCopy('text-grey-dark')">.text-grey-dark</p>
                    </div>
                </div>
                <div nz-col [nzSpan]="4">
                    <div class="bg-grey p-lg">
                        <p (click)="onCopy('bg-grey')">.bg-grey</p>
                        <p (click)="onCopy('text-grey')">.text-grey</p>
                    </div>
                </div>
                <div nz-col [nzSpan]="5">
                    <div class="bg-grey-light p-lg">
                        <p (click)="onCopy('bg-grey-light')">.bg-grey-light</p>
                        <p (click)="onCopy('text-grey-light')">.text-grey-light</p>
                    </div>
                </div>
                <div nz-col [nzSpan]="5">
                    <div class="bg-grey-lighter p-lg">
                        <p (click)="onCopy('bg-grey-lighter')">.bg-grey-lighter</p>
                        <p (click)="onCopy('text-grey-lighter')">.text-grey-lighter</p>
                    </div>
                </div>
            </div>
        </nz-card>
    </div>
</div>
<div nz-row [nzGutter]="16" class="list">
    <div nz-col [nzMd]="24">
        <nz-card nzTitle="Full Colors">
            <div nz-row>
                <div nz-col [nzSpan]="4" *ngFor="let c of c.names">
                    <div *ngFor="let i of nums" class="bg-{{c}}-{{i}} p-lg">
                        <p (click)="onCopy('bg-' + c + '-' + i)">.bg-{{c}}-{{i}}</p>
                        <p (click)="onCopy('bg-' + c + '-' + i + '-h')">.bg-{{c}}-{{i}}-h</p>
                        <p (click)="onCopy('text-' + c + '-' + i)">.text-{{c}}-{{i}}</p>
                    </div>
                </div>
            </div>
        </nz-card>
    </div>
</div>
